<script setup lang="ts">
import {onMounted, ref} from "vue";
import {
  getGoodsAPI,
  getConsigneeAPI,
  addUnivalenceAPI
} from "@/axios/api";
import {ElMessage} from "element-plus";


const formData = ref({
  //商品名称id
  gid: "",
  //收货单位id
  uid: "",
  //单位
  per:"",
  //单价
  costPrice:"",
  //备注
  remark: ""
})
//存放收货单位数据
const consigneeList=ref([])
//存放商品数据
const GoodsList = ref([])
const perList=ref(["千克","斤","升"])
function getGoods() {
  getGoodsAPI({
    pageNum: null,
    pageSize: null
  }).then(data => {
    GoodsList.value = data.data.data.stockList
  })
}
function getConsignee(){
  getConsigneeAPI({
    pageNum: null,
    pageSize: null
  }).then(data=>{
    console.log(data.data.data)
    consigneeList.value=data.data.data
    console.log(consigneeList.value)
  })
}
function addUnivalence() {
  if (!formData.value.uid) {
    ElMessage.error("收货单位不能为空")
    return
  }
  if (!formData.value.gid) {
    ElMessage.error("商品不能为空")
    return
  }
  if (!formData.value.per) {
    ElMessage.error("单位不能为空")
    return
  }
  if (!formData.value.costPrice) {
    ElMessage.error("单价不能为空")
    return
  }
  console.log("添加数据",formData.value)
  addUnivalenceAPI(formData.value).then(data => {
    console.log(data)
    ElMessage.success(data.data.message)
    // empty()
  })
}

function empty() {
  for (const key in formData.value) {
    formData.value[key] = ""
  }
}

onMounted(() => {
  getGoods()
  getConsignee()
})
</script>
<template>
  <el-form
      :model="formData"
      label-width="auto"
      style="max-width: 600px"
  >
    <el-form-item
        label="收货单位:"
    >
      <el-select
          v-model="formData.uid"
          placeholder="请选择收货单位"
      >
        <el-option
            v-for="item in consigneeList"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item
        label="商品名称:"
    >
      <el-select
          v-model="formData.gid"
          placeholder="请选择商品名称"
      >
        <el-option
            v-for="item in GoodsList"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item
        label="单位:"
    >
      <el-select
          v-model="formData.per"
          placeholder="请输入单位"
          filterable
          allow-create
      >
        <el-option
            v-for="item in perList"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-form-item>

    <el-form-item
        label="单价:"
    >
      <el-input
          v-model="formData.costPrice"
          type="number"
          :step="0.01"
          placeholder="请输入单价"
      />
    </el-form-item>

    <el-form-item
        label="备注:"
    >
      <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入备注"
          show-word-limit
          :maxlength="250"
      />
    </el-form-item>

    <el-form-item
        label=" "
    >
      <el-button
          type="primary"
          @click="addUnivalence"
      >添加
      </el-button>
      <el-button
          @click="empty"
      >取消
      </el-button>
    </el-form-item>
  </el-form>
</template>